<template>
    <div>
        <van-popup v-model="show" position="right" :overlay="false">
            <div class="popup-body">
                <div v-if="true">
                    <div class="type">筛选类型</div>
                    <div class="options">
                        <div class="option"
                             v-for="(item, index) in types"
                             :class="{active:istrue === index}"
                             @click="istrue=index">{{item}}</div>
                    </div>
                </div>
                <div class="choose">选择起止时间</div>
                <div class="circle" @click="choose('begin')">
                    <div>{{begin}}</div>
                    <svg class="icon right" aria-hidden="true">
                        <use xlink:href="#icon-chevronright"></use>
                    </svg>
                </div>
                <div class="line"></div>
                <div class="circle" @click="choose('end')">
                    <div>{{end}}</div>
                    <svg class="icon right" aria-hidden="true">
                        <use xlink:href="#icon-chevronright"></use>
                    </svg>
                </div>
                <div class="btn">
                    <div @click="sure" class="sure">确定</div>
                    <div @click="close" class="cancle">取消</div>
                </div>
                <van-popup v-model="chooseShow" position="bottom">
                    <van-datetime-picker
                            v-model="currentDate"
                            type="date"
                            :min-date="minDate"
                            @confirm="confirm"
                            @cancel="cancle"

                    />
                </van-popup>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { DatetimePicker } from 'vant';

    Vue.use(DatetimePicker);
    export default {
        name: 'screen',
        data() {
            return {
                chooseShow: false,
                currentDate: new Date(),
                minDate: new Date(),
                type: 'begin',
                begin: '开始时间',
                end: '结束时间',
                show: this.filterShow,
                istrue: 0
            };
        },
        props:['filterShow','types'],

        computed: {},
        watch: {
            filterShow(value){
                this.show = value;
            }
            // 监听具体数据变化，并做相应的处理
        },
        methods: {
            close(){
                this.show=false;
                this.$emit('close', false)
            },
            sure() {
                this.show=false;
                this.$emit('close', false)
            },
            choose(type){
                this.chooseShow = true;
                this.type = type;
            },
            confirm(value){
                this.chooseShow = false;
                let y = value.getFullYear();
                let m = value.getMonth()+1;
                let d = value.getDate();
                if (m < 10) {
                    m = "0" + m;
                }
                if (d < 10) {
                    d = "0" + d;
                }
                this[this.type] = y + "-" + m + "-" + d;
            },
            cancle(){
                this.chooseShow = false;
            }
        },
        beforeCreate() {
            // 可以在这加个loading事件，在加载实例时触发
            // 这个阶段实例的data、methods是读不到的
        },
        created() {
            // 初始化数据，如在这结束loading事件，异步ajax请求也适宜在这里调用
            // 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。
            // mount挂载阶段还没开始，"el" 属性目前不可见，数据并没有在DOM元素上进行渲染
        },
        beforeMount() {
            // 相关的 render 函数首次被调用。
        },
        mounted() {
            // 挂载元素，获取到DOM节点
            // el选项的DOM节点 被新创建的 vm的el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
        },
        beforeUpdate() {
            // 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
        },
        updated() {
            //  如果对数据统一处理，在这里写上相应函数
            // 这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
        },
        beforeDestroy() {
            // 可以做一个确认停止事件的确认框
        },
        destroyed() {
            // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
        }
    };

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .van-popup--right{
        left 0
        .popup-body{
            height 100vh
            padding cellPadding
            box-sizing border-box
            .type{
                font-size word14
                color gray3
                margin-bottom smallMargin
            }
            .options{
                display flex
                .option{
                    width vw(60)
                    height vw(25)
                    line-height vw(25)
                    margin-right middleMargin
                    background-color grayE
                    text-align center
                    border-radius vw(20)

                }
                .active{
                    background-color main-color
                    color grayF
                }
            }
        }
        .choose{
            margin-top middleMargin
            line-height vw(30)
            height vw(30)
            font-size word14
            color gray3
        }
    }

    .circle{
        color gray6
        font-size word14
        display flex
        justify-content space-between
        height vw(30)
        align-items center
        svg{
            arrow()
        }
    }
    .line{
        line()
    }
    .btn{
        display flex
        .sure{
            secondary-solid()
        }
        .cancle{
            secondary-hollow()
        }
    }

</style>
